<template>
  <!-- 模态框 -->
  <MoveModal width="40%" :visible="modalShow" @ok="modalConfirm" @cancel="modalCancel">
    <!-- 标题作用域插槽 -->
    <div slot="title" class="wrap_title">
      <div class="wrap_title_label"></div>
      <div class="wrap_title_value">{{ title }}</div>
      <!-- 下一环节信息 -->
      <!-- <a-popover v-if="processNext && processNext.next" class="poppverBox" placement="topLeft">
        <template slot="content">
          <div>下一环节审批</div>
          <a-divider style="margin: 10px" />
          <div v-for="(item, index) in processNext.next" :key="index">
            {{ item.name }} :
            <span>
              {{ item.assignee.join('，') }}
            </span>
            <span v-if="item.groupusers"> （{{ item.groupusers.join('，') }}） </span>
          </div>
        </template>
        <a-button type="link" icon="arrow-right"></a-button>
      </a-popover> -->
    </div>

    <!-- 可滚动区域 -->
    <div class="corebox">
      <!-- 审批意见 -->
      <div class="wrap_opinion">
        <div class="wrap_opinion_label">意见</div>
        <!-- 整改补正意见按钮 -->
        <!-- <slot name="handleButton"></slot> -->
        <div class="wrap_opinion_value">
          <a-textarea
            v-model="textareaValue"
            class="wrap_opinion_value_input"
            :placeholder="placeholder"
            :max-length="1500"
            :autoSize="{ minRows: 4, maxRows: 4 }"
          />
          <!-- 常用语显示按钮 -->
          <!-- <div class="wrap_opinion_value_button" @click="screenClick">
            <a-icon
              :class="
                screenShow
                  ? 'wrap_opinion_value_button_icon wrap_opinion_value_button_icon_active'
                  : 'wrap_opinion_value_button_icon'
              "
              type="double-left"
            />
            <div class="wrap_opinion_value_button_text">常用语选择</div>
          </div> -->
        </div>
      </div>

      <!-- 下一步处理人 -->
      <div v-if="taskObj.isNextPerson && !hideNextList.includes(this.$route.params.category)">
        <div class="wrap_type">
          <div class="wrap_type_label">下一步处理人</div>
        </div>

        <div class="wrap_opinion_value">
          <!-- 下一步处理人选择 -->
          <CANDIDATA ref="candidataRef" :f_nextList="processNext.next" @f_setTaskVariable="s_setTaskVariable" />
        </div>
      </div>

      <!-- 上一环节意见 -->
      <div class="wrap_type" v-if="previousStep != null">
        <div class="wrap_step_label">
          <span>上一环节（{{ previousStep.taskname }}）</span>
          <span @mouseenter="isOpinio = true" @mouseleave="isOpinio = false" class="wrap_step_label_view"
            >查看进度 ></span
          >
        </div>
        <div class="wrap_menu">
          <a-row>
            <a-col class="wrap_menu_text" :span="12">
              <template v-if="previousStep.taskname">{{ previousStep.taskname }}</template>
              <!-- 操作 -->
              <template v-if="previousStep.type"
                ><template v-if="previousStep.taskname"> - </template
                ><span class="timeLineArea_operation">{{ previousStep.type }}</span></template
              >
            </a-col>
            <a-col class="wrap_menu_text" :push="6" :span="2" :xxl="2"> {{ previousStep.username }} </a-col>
            <a-col class="wrap_menu_text" :push="6" :span="6"> {{ previousStep.time }} </a-col>
          </a-row>
          <div class="wrap_menu_remake">意见：{{ previousStep.message }}</div>
        </div>
      </div>

      <!-- 筛选类别 -->
      <!-- <div v-show="screenShow">
        <div class="wrap_type">
          <div class="wrap_type_label">筛选类别</div>
          <MatterCascaderCopy
            class="wrap_type_value"
            @f_onBizChange="s_onBizChange"
            placeholder="请选择范围"
            :isLazy="true"
            :echoList="echoList"
          ></MatterCascaderCopy>
        </div>
        <div @click="searchClick" class="wrap_menu">
          <a-input v-model="queryParam.f_content" class="wrap_menu_search" placeholder="搜索常用语" allowClear>
            <div slot="addonAfter" class="wrap_menu_search_after"><a-icon type="search" /> <span>搜索</span></div>
          </a-input>
          <div class="wrap_menu_list">
            <div
              :class="item.id == activeKey ? 'wrap_menu_list_item wrap_menu_list_item_active' : 'wrap_menu_list_item'"
              v-for="item in menuList"
              :key="item.id"
              @click="chooseItem(item)"
            >
              {{ item.content }}
            </div>
          </div>
        </div>
      </div> -->
    </div>

    <div class="wrap_footer" slot="footer">
      <slot name="buttonList"></slot>
    </div>

    <!-- 右侧进度浮框 -->
    <Opinio
      v-show="isOpinio"
      @f_findPreviousStep="s_findPreviousStep"
      class="wrap_opinit"
      @s_mouseenter="isOpinio = true"
      @s_mouseleave="isOpinio = false"
    />
  </MoveModal>
</template>

<script>
import { findtMatteByApplyid } from '../../api/std/std_matter.js'
import { queryStd_comwordList } from '@/api/std/std_comword.js'
import { Tp_categoryValue } from '@/enumeration/Tp_category.js'
import { Tp_actionValue } from '@/enumeration/Tp_action.js'
import { hideNextList } from '@/enumeration/Tp_category.js'
export default {
  name: 'operationModal',
  props: {
    // 标题
    title: {
      type: String,
      default: '业务处理',
    },
    // 下一环节信息
    processNext: {
      type: Object,
    },
    // 审批意见
    remark: {
      type: String,
    },
    // 输入框提示
    placeholder: {
      type: String,
    },
    applyid: {
      type: String,
      require: true,
    },
    // 下一步处理人数据
    f_nextList: {
      typeof: Array,
      require: true,
    },
    taskObj: {
      typeof: Object,
      require: true,
    },
  },
  data() {
    return {
      hideNextList: hideNextList, // 需要隐藏下一步处理人的环节
      Tp_categoryValue: Tp_categoryValue, // 环节分类标识
      previousStep: null, // 上一步
      isOpinio: false, // 意见浮框状态
      modalShow: false, // 模态框显示
      textareaValue: this.remark || undefined, // 意见绑定vuex
      screenShow: false, // 是否显示筛选数据
      activeKey: null, // 列表激活值
      visible: false, // 组件显示状态
      echoList: [], // 回显条件
      queryParam: {
        isUse: true, // 是否是在使用中进行查询 (使用中会根据权重 环节 > 事项 > 分类 进行排序)
        sort: 'sortnum',
        order: 'desc',
        f_content: '', // 搜索条件
      }, // 查询条件
      menuList: [], // 可选的常用语菜单
    }
  },
  watch: {
    '$store.state.opinion.opinion'(newVal) {
      this.$emit('f_setremark', newVal)
      this.textareaValue = newVal
    },
    textareaValue(val) {
      this.$emit('f_setremark', val)
    },
    remark(val) {
      this.textareaValue = val || undefined
    },
  },
  components: {
    MatterCascaderCopy: () => import('@/views/base/Std_matterCascaderCopy.vue'),
    Opinio: () => import('./Wf_formOpinio.vue'),
    MoveModal: () => import('@/components/Power/MoveModal.vue'),
    FileUpload: () => import('@/views/other/fileUpload.vue'),
    CANDIDATA: () => import('@/views/workflow/Wf_candidata.vue'),
  },
  methods: {
    f_init() {
      this.modalShow = true
    },
    // 下一步处理人数据
    s_setTaskVariable(data) {
      this.$emit('f_setTaskVariable', data)
    },
    // 父组件调用赋值
    f_setValue(val) {
      this.textareaValue = val || undefined
    },
    // 子组件调用, 查找上一步的意见信息
    s_findPreviousStep(opinioList) {
      // console.log('查找上一步', opinioList, this.$route.params.taskid)
      let i = 0
      for (let v of opinioList) {
        // 最后一个是接收材料的通过, 不找没有参考价值
        if (i == opinioList.length - 1) {
          return
        }
        // 找最近的一个通过节点
        if (v.action == Tp_actionValue.HANDLE) {
          this.previousStep = v
          // console.log('上一步', this.previousStep)
          return
        }
        i++
      }
    },
    // 常用语搜索框点击事件
    searchClick() {
      this.findStd_comwordList()
    },
    // 常用语选择点击事件
    screenClick() {
      this.screenShow = !this.screenShow
      this.popVisible(true)
    },
    // 级联触发
    s_onBizChange(value) {
      // console.log('常用语范围', value)
      this.queryParam.f_cateid = value[0] == 'all' ? null : value[0]
      this.queryParam.f_bizid = value[1] == 'all' ? null : value[1]
      this.queryParam.f_category = value[2] == 'all' ? null : value[2]
      this.findStd_comwordList()
    },
    /**
     *  查询常用语列表
     */
    findStd_comwordList() {
      queryStd_comwordList(this.queryParam).then((res) => {
        // console.log('常用语表格数据', res.data)
        if (res.code == 0) {
          this.menuList = res.data.records || []
        }
      })
    },
    // 初始化类别
    popVisible(status) {
      if (this.visible == false && status) {
        // console.log('分类', this.$route.params.category)
        findtMatteByApplyid(this.applyid).then((res) => {
          // console.log('申请事项', res)
          if (res.code == 0) {
            this.queryParam.f_cateid = res.data.cateid || null
            this.queryParam.f_bizid = res.data.applyid || null
            // 只有自定义标识的流程环节才用来进行查询
            this.queryParam.f_category = this.$route.params.category

            // 使用中的排序字段依据赋值
            this.queryParam.usecateid = this.queryParam.f_cateid
            this.queryParam.usebizid = this.queryParam.f_bizid
            this.queryParam.usecategory = this.queryParam.f_category
            this.findStd_comwordList()
            // 常用语默认回显当前事项的常用语记录
            this.echoList.push(this.queryParam.f_cateid)
            this.echoList.push(this.queryParam.f_bizid)
            this.echoList.push(this.queryParam.f_category)
          }
          // console.log('初始化回显', this.echoList)
        })
      }
      this.visible = status
    },
    // 模态框确认
    modalConfirm() {
      this.modalShow = false
    },
    // 模态框取消
    modalCancel() {
      this.modalShow = false
    },
    // 点击列表
    chooseItem(item) {
      this.activeKey = item.id
      this.textareaValue = item.content
      this.popVisible(false)
    },
  },
}
</script>

<style lang="less" scoped>
.corebox::-webkit-scrollbar {
  display: none;
}
.corebox {
  max-height: 500px;
  overflow: auto;
  width: 100%;
}
.wrap_opinit {
  position: relative;
}
.wrap_step_label {
  display: flex;
  justify-content: space-between;
  &_view {
    color: #007eff;
    font-size: 15px;
    text-decoration: underline;
    cursor: pointer;
    width: 100px;
    margin-right: -25px;
    // border: 1px solid red;
    z-index: 99999999;
  }
}
.wrap_menu_remake {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #262626;
}
.wrap_menu_text {
  font-size: 14px;
  font-weight: 500;
  color: #7b8186;
}
.wrap_title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;
  // border: 1px solid red;
}

.wrap_title_label {
  width: 4px;
  height: 18px;
  background-color: #007ce5;
  border-radius: 2px;
}

.wrap_title_value {
  margin-left: 10px;
  line-height: 18px;
  font-size: 18px;
  color: #262626;
  font-weight: 550;
}

.wrap_opinion_label,
.wrap_step_label {
  font-size: 16px;
  color: #262626;
}

.wrap_opinion_value {
  margin-top: 13px;
  display: flex;
  align-items: center;
  width: 99%; // 意见输入框宽度

  /deep/.ant-input {
    border: 1px solid #d6dadd;
    border-radius: 4px 0px 0px 4px;
    // border-right: none; // 右侧线条
  }

  /deep/.ant-input:focus {
    border: 1px solid #40a9ff;
    border-right: none;
  }
}

.wrap_opinion_value_input {
  width: 100%;
  height: 90px;
}

.wrap_opinion_value_button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 94px;
  width: 100px;
  border: 1px solid #02a792;
  border-radius: 0px 4px 4px 0px;
  background-color: #f1fffd;
  cursor: pointer;
}

.wrap_opinion_value_button_icon {
  color: #02a792ff;
  transform: rotate(90deg);
}

.wrap_opinion_value_button_icon_active {
  transform: rotate(270deg);
}

.wrap_opinion_value_button_text {
  margin-top: 6px;
  font-size: 14px;
  color: #02a792;
  user-select: none;
}

.wrap_type {
  margin-top: 20px;
}

.wrap_type_label {
  font-size: 16px;
  color: #262626;
}

.wrap_type_value {
  margin-top: 13px;
  width: 100%;
  background: #f1f7fb;
  border-radius: 20px;
}

.wrap_menu {
  margin-top: 10px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #d6dadd;
  border-radius: 4px;

  /deep/.ant-input-group-addon {
    background-color: #2ea9ff;
    color: #ffffff;
  }
}

.wrap_menu_search {
  /deep/.ant-input {
    height: 40px;
  }
  /deep/.ant-input-group-addon {
    height: 40px;
    border: none;
  }
}

.wrap_menu_search_after {
  cursor: pointer;
}

.wrap_menu_list {
  margin-top: 15px;
}

.wrap_menu_list_item {
  cursor: pointer;
  padding: 8px 10px;
  font-size: 15px;
  color: #262626;
  border: 1px solid rgb(241, 239, 239);
  padding: 5px;
  margin: 5px 0;
  background-color: rgb(250, 248, 248);
  border-radius: 2px;
}

.wrap_menu_list_item_active {
  color: #007ce5;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.wrap_footer {
  padding: 20px 10px 20px 10px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: flex-end;
  // border: 1px solid red;
}
</style>
